<template>
  <div class="good radius_md">
    <van-image
      class="good-image"
      width="100%"
      fit="cover"
      position="center"
      :src="pictures[0]"
    />
    <div class="good-footer px_sm pt_xs pb_sm">
      <div class="title">
        {{description}}
      </div>
      <div class="price h3">
        <small class="dollar">¥</small>{{price}}<small class="unit" v-if="unit">/{{unit}}</small>
      </div>
      <div class="align-items_center">
        <van-image
          class=""
          round
          width="1rem"
          height="1rem"
          :src="avatar"
        />
        <p class="username px_xs">{{username}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { navigate } from '@/service/navigate';
export default defineComponent({
  name: 'Good',
  props: {
    id: Number,
    username: String,
    avatar: String,
    description: String,
    price: Number,
    unit: String,
    pictures: {
      type: Array<String>,
      default: [],
    },
  },
  setup() {
    return {
      navigate,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

::v-deep(.good-image) {
  img {
    border-top-right-radius: map-get($radii, default) !important;
    border-top-left-radius: map-get($radii, default) !important;
    max-height: calc(100vw/2);
    min-height: calc(100vw/2);
  }
}
.good {
  background: #fff;

  .title {
    display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }
  .price {
    font-weight: bold;
    color: #ff4f24;
    .dollar {
      font-size: 12px;
    }
    .unit {
      font-size: 14px;
    }
  }
  .username {
    color: #999;
  }
}
</style>
